<template>
    <el-dialog v-model="isOpen" title="自定义规则法分组结果" :border="true" align-center>
        <el-descriptions column="1" border>
            <el-descriptions-item label="分组边界">
                <span v-for="(boundary, index) in result.boundaries" :key="index">
                    {{ boundary }}{{ index < result.boundaries.length - 1 ? ", " : "" }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="各组数据量">
                <el-descriptions column="1" border>
                    <el-descriptions-item
                        v-for="(count, range) in result.groupStats"
                        :label="range"
                        :key="range">
                        {{ count }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div ref="chartContainer" style="width: 100%;height: 400px" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="isOpen = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "originalData", "result" ])

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

function initChart(){
    nextTick(() => {
        if(!chartContainer.value){
            return
        }
        if(!props.result){
            return
        }
        if(!props.result.groupStats){
            return
        }

        if(!chartInstance.value){
            chartInstance.value = echarts.init(chartContainer.value)
        }

        // 准备分组数据
        const groups = Object.keys(props.result.groupStats)
        const counts = Object.values(props.result.groupStats)

        // 计算总数据量
        const totalCount = counts.reduce((sum, val) => sum + val, 0)

        const option = {
            tooltip   : {
                trigger  : "item",
                formatter: (params) => {
                    return `${ params.name }: ${ params.value }个数据`
                },
            },
            grid      : {
                left        : "10%",
                right       : "10%",
                bottom      : "20%",
                top         : "10%",
                containLabel: true,
            },
            xAxis     : {
                type     : "category",
                data     : groups,
                name     : "数据分组区间",
                axisLabel: {
                    rotate: 30,
                },
            },
            yAxis     : {
                type       : "value",
                name       : "数据数量",
                minInterval: 1,
            },
            series    : [
                {
                    type     : "bar",
                    data     : counts,
                    name     : "分组数据量",
                    itemStyle: {
                        color: "#e67e22",
                    },
                    label    : {
                        show     : true,
                        position : "top",
                        formatter: (params) => `${ params.value }`,
                    },
                },
            ],
            annotation: {
                label: {
                    fontSize: 12,
                    color   : "#333",
                },
                data : [
                    {
                        type      : "text",
                        position  : [ "50%", "95%" ],
                        value     : `数据总量: ${ totalCount }`,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                    },
                ],
            },
        }

        chartInstance.value.setOption(option)

        window.onresize = function(){
            chartInstance.value.resize()
        }
    })
}
</script>

<style lang="scss" scoped>
</style>
